#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}

#index .bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 0 16px;
  background-image: url("../../assets/pageBg.png");
  background-size: cover;
  background-position: center center;
}

#index .host-body .dv-dec-10,
#index .host-body .dv-dec-10-s {
  width: 33.3%;
  height: 5px;
}

#index .host-body .dv-dec-10-s {
  transform: rotateY(180deg);
}

#index .host-body .dv-dec-8 {
  width: 200px;
  height: 50px;
}

#index .host-body .title {
  position: relative;
  display: flex;
  width: 500px;
  height: 100%;
  margin-top: 15px;
  text-align: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("../../assets/logo.0a9934bd.png");
}

#index .host-body .title .title-text {
  font-size: 24px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

#index .host-body .title .dv-dec-6 {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 250px;
  height: 8px;
  transform: translate(-50%);
}

#index .host-body .aside-width {
  width: 100%;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#index .host-body .tab {
  width: 150px;
  height: 40px;
  background-image: url("../../assets/tab.png");
  background-size: 100% 100%;
  text-align: center;
  line-height: 40px;
  font-size: 22px;
}

#index .host-body .tab2 {
  width: 150px;
  height: 40px;
  background-image: url("../../assets/tab.png");
  background-image: url("../../assets/tab2.png");
  background-size: 100% 100%;
  text-align: center;
  line-height: 40px;
  font-size: 22px;
}

#index .host-body .react-r-s,
#index .host-body .react-l-s {
  background-color: #0f1325;
}

#index .host-body .react-right {
  font-size: 18px;
  width: 300px;
  line-height: 50px;
  text-align: center;
  transform: skewX(-45deg);
}

#index .host-body .react-right.react-l-s {
  text-align: right;
  width: 500px;
}

#index .host-body .react-right .react-after {
  position: absolute;
  right: -25px;
  top: 0;
  height: 50px;
  width: 50px;
  background-color: #0f1325;
  transform: skewX(45deg);
}

#index .host-body .react-right .text {
  display: inline-block;
  transform: skewX(45deg);
}

#index .host-body .react-left {
  font-size: 18px;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transform: skewX(45deg);
  background-color: #0f1325;
}

#index .host-body .react-left.react-l-s {
  width: 500px;
  text-align: left;
}

#index .host-body .react-left .react-before {
  position: absolute;
  left: -25px;
  top: 0;
  height: 50px;
  width: 50px;
  background-color: #0f1325;
  transform: skewX(-45deg);
}

#index .host-body .react-left .text {
  display: inline-block;
  transform: skewX(-45deg);
}

#index .host-body .body-box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

#index .host-body .body-box .content-box {
  display: grid;
  grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
}

#index .host-body .body-box .bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
